<template>
  <div class="app-container root">
    <el-row style="margin-top: 10px;height:100px;flex-grow: 1" :gutter="10">
      <el-col :span="4" style="height: 100%">
        <el-card style="height: 100%;overflow-y: auto;overflow-x: auto" shadow="never" body-style="padding:10px">
          <div>
            <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText">
            </el-input>

            <el-tree
              class="filter-tree"
              style="margin-top: 5px"
              :data="data"
              :props="defaultProps"
              node-key="id"
              default-expand-all
              @node-click="nodeClick"
              accordion
              :filter-node-method="filterNode"
              ref="tree">
              <span slot-scope="{ node, data }">
                <span :style="formatStyle(data)">
                  <span>{{ data.name }}</span>
                  <span v-if="!node.isLeaf">({{ data.num }})</span>
                  <span v-if="node.isLeaf && data.isStop=='1'">(已停用)</span>
                </span>
              </span>
            </el-tree>
          </div>
        </el-card>
      </el-col>
      <el-col :span="20" style="height: 100%">
        <el-card style="height: 100%" shadow="never">
          <div class="content-info" style="height: 100%" v-if="chooseData">
            <div>{{ chooseData.name }} - 预警设置</div>
            <div style="margin-top: 10px">
              <span>安全库存数量：</span>
              <span style="font-weight: 700;font-size: 16px">{{ safeStock||'未设置' }}</span>
            </div>
            <div>
              <span>未还超期天数：</span>
              <span style="font-weight: 700;font-size: 16px">{{ overdueDay||'未设置' }}</span>
            </div>

            <el-button type="primary" style="margin-top: 20px;" v-permission="['base_manage_set_add']" @click="goSetting">点击设置</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      center
      :title="dialogTitle"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="420px">
      <el-form ref="ruleForm" :model="dataForm" :rules="$rules.warningRules" label-width="120px">
        <el-form-item label="安全库存数量" prop="safeStock">
          <el-input v-model="dataForm.safeStock" style="width: 250px" placeholder="请输入安全库存数量"></el-input>
        </el-form-item>
        <el-form-item label="未还超期天数" prop="overdueDay">
          <el-input v-model="dataForm.overdueDay" style="width: 250px" placeholder="请输入未还超期天数"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button type="primary" @click="saveData()">保存</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  setEquipmentWarningSet,
  getBaseEquipmentType,
  getEquipmentWarningSet
} from '@/api/warehouse'

export default {
  name: 'WarningSetting',
  data() {
    return {
      dialogTitle: '器材预警设置',
      dialogVisible: false,
      chooseData: null,
      filterText: '',
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      overdueDay: '',
      safeStock: '',
      dataForm: {
        id: '',
        equipmentTypeId: '',
        overdueDay: '',
        safeStock: ''
      }
    }
  },
  mounted() {
    this.query()
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    formatStyle(data) {
      if (data.level < 2) {
        return 'color:#252525;font-size:16px;font-weight:500'
      } else if (data.level == 2) {
        return 'color:#252525;font-size:14px;font-weight:500'
      } else {
        return 'color:#666666;font-size:14px'
      }
    },
    query() {
      getBaseEquipmentType({}).then(res => {
        this.data = res.resultData
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    goSetting() {
      this.dataForm.overdueDay = this.overdueDay
      this.dataForm.safeStock = this.safeStock
      this.dataForm.equipmentTypeId = this.chooseData.id
      this.dialogVisible = true
    },
    nodeClick(data, node, detail) {
      if (data.level == 3) {
        this.chooseData = data
        getEquipmentWarningSet({ equipmentTypeId: this.chooseData.id }).then(res => {
          this.overdueDay = res.resultData.overdueDay
          this.safeStock = res.resultData.safeStock
          this.dataForm.id = res.resultData.id
        })
      }
    },
    saveData() {
      const _this = this
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          setEquipmentWarningSet(this.dataForm).then(response => {
            if (response.success) {
              _this.$message({
                message: '设置成功',
                type: 'success'
              })
              this.dialogVisible = false
              getEquipmentWarningSet({ equipmentTypeId: this.chooseData.id }).then(res => {
                this.overdueDay = res.resultData.overdueDay
                this.safeStock = res.resultData.safeStock
                this.dataForm.id = res.resultData.id
              })
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';

.root {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - 104px);

  .tree-right-menu {
    position: fixed;
    display: block;
    z-index: 20000;
    //background-color: #fff;
    //padding: 5px 0;
    //border: 1px solid #ebeef5;
    //border-radius: 4px;
    //box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  }

  .content-info {
    div {
      line-height: 24px;
      font-size: 14px;
      color: $contentTextColor;
    }

    div:first-child {
      font-weight: 500;
      font-size: 16px;
      color: $titleTextColor;
    }
  }
}
</style>
